<template>
  <div class="app-container" :loading="submitLoading">
    <div class="filter-container">
      <div style="align-items: center;display: flex;">
        <div>
          <el-input v-model="listQuery.keyword" placeholder="搜索关键字" clearable></el-input>
        </div>
        <div>
          <el-date-picker prefix-icon="none" v-model="listQuery.searchTime" type="datetimerange"
            :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            align="right" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']
            ">
          </el-date-picker>
        </div>
        <div style="width: 110px;">
          <el-select v-model="listQuery.check_status" placeholder="请选择" @change="selet()">
              <el-option
                      v-for="item in listQuery.partner"
                      :key="item.check_status"
                      :label="item.name"
                      :value="item.check_status">
              </el-option>
          </el-select>
        </div>
        <el-button type="primary" icon="el-icon-search" @click="searchList()">
          搜索
        </el-button>
        <el-button type="primary" icon="el-icon-refresh-right" @click="Refresh()">
          刷新
        </el-button>
      </div>
    </div>
    <!-- 列表-->
    <el-table :data="list" v-loading="listLoading" border style="width: 100%;">
      <el-table-column label="id" prop="id" align="center" width="70">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同编号" align="left">
        <template slot-scope="scope">
          <span class="link-type" @click="list_detail(scope)">{{scope.row.contract_num}}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同标题" align="center">
        <template slot-scope="scope">
          <span class="link-type" @click="list_detail(scope)">{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同类型" align="center">
        <template slot-scope="{row}">
          <span>{{row.type_str}}</span>
        </template>
      </el-table-column>
      <el-table-column label="委托单位" align="center">
        <template slot-scope="{row}">
          <span>{{ row.entrust_unit}}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column label="市场负责人" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.market_person_uid_str}}</span>
        </template>
      </el-table-column>
      <el-table-column label="市场配合人" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.market_person_b_uid_str}}</span>
        </template>
      </el-table-column>
      <el-table-column label="合伙人" align="center" width="120">
        <template slot-scope="{row}">
          <!-- <span>{{ row.market_person_b_uid_str}}</span> -->
          <div v-for="item in row.market_person_partner">
            {{item.real_name}}:{{item.ratio}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{row.check_status_str}}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center">
        <template slot-scope="{row}">
          <span>{{ row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.check_status==0">
              <el-tooltip class="item" effect="dark" content="通过" placement="top">
                <el-popconfirm title="确定通过吗？" @onConfirm="edit(scope)">
                  <el-button slot="reference" size="mini" icon="el-icon-check" type="success">
                    <!-- 修改 -->
                  </el-button>
                </el-popconfirm>
              </el-tooltip>

              <el-tooltip class="item" effect="dark" content="驳回" placement="top">
                <el-popconfirm title="确定驳回吗？" @onConfirm="list_del(scope)">
                  <el-button slot="reference" style="margin-left: 10px;" size="mini" icon="el-icon-close" type="danger">
                  </el-button>
                </el-popconfirm>
              </el-tooltip>
          </div>
          <div v-if="scope.row.check_status==1">
              <el-popconfirm title="恢复后,合同才可以再次编辑" @onConfirm="recovery_edit(scope)">
                <el-button slot="reference" style="margin-left: 10px;" size="mini"  type="success">
                  恢复编辑
                </el-button>
              </el-popconfirm>
          </div>
          <div v-if="scope.row.check_status==2">

          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog title="详情" :visible.sync="popup_details_show" width="50%" center>
      <div>
        <div class="main">
          <div>
            <div class="nav-left">
              <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
                <div style="display: flex;justify-content: space-between;">
                  <div style="width: 50%;">
                    <el-form-item label="合同标题" prop="title">
                      {{ruleForm.title}}
                    </el-form-item>
                    <el-form-item label="委托单位" prop="entrust_unit">
                      {{ruleForm.entrust_unit}}
                    </el-form-item>
                    <el-form-item label="生效日期" prop="shengxiao_date">
                      {{ruleForm.shengxiao_date_str}}
                    </el-form-item>
                    <el-form-item label="截止日期" prop="jiezhi_date">
                      {{ruleForm.jiezhi_date_str}}
                    </el-form-item>
                    <el-form-item label="负责人人员" prop="market_person_uid_str">
                      {{ruleForm.market_person_uid_str}}
                    </el-form-item>
                  </div>
                  <div style="width: 50%;">
                    <el-form-item label="合同编号" prop="contract_num">
                      {{ruleForm.contract_num}}
                    </el-form-item>
                    <el-form-item label="建设单位" prop="build_position">
                      {{ruleForm.build_position}}
                    </el-form-item>
                    <el-form-item label="签约日期" prop="qianyue_date">
                      {{ruleForm.qianyue_date_str}}
                    </el-form-item>
                    <el-form-item label="配合人员" prop="market_person_b_uid_str">
                      {{ruleForm.market_person_b_uid_str}}
                    </el-form-item>
                    <el-form-item label="提醒日期" prop="tixing_date">
                      {{ruleForm.tixing_date}}
                    </el-form-item>
                  </div>
                </div>
              </el-form>
            </div>
          </div>
          <div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
              class="demo-ruleForm">
              <el-form-item label="备注" prop="pass">
                {{ruleForm.remark}}
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="popup_details_show = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 分页-->
    <div class="fenye">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 40]" :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="page_count">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {
      uncheck_list,
      contract_detail,
      contract_check
    } from '@/api/jiesuan/contract/uncheck'
  // import Sortable from 'sortablejs'
  export default {
    // comments:{
    //   Sortable
    // },
    name: 'contract_uncheck',
    data() {
      return {
        list_elections: [],
        ruleForm: {
          title: '',
          content: '',
          sort: 0,
          is_top: false,
        },
        rules: {
          title: [{
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }]
        },
        listLoading: 0,
        submitLoading: false,
        popup_details_show: false,
        popup_edit_show: false,
        popup_add_show: false,
        diary_details: {},
        dialogVisible: false,
        // jia_content: "",
        // jia_title: "",
        list: null,
        listQuery: {
          is_guajie: "0",
          page: 1,
          limit: 10,
          keyword: "",
          searchTime: [],
          check_status:"0",
          partner:[
            {'name':"未审核","check_status":"0"},
            {'name':"审核通过","check_status":"1"},
            {'name':"全部状态","check_status":"-1"},
            {'name':"驳回","check_status":"2"}
          ],
        },
        // tableKey: 1,
        // currentPage: 1,
        page_count: 0,
        // page_limit: 10,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
        }
      }
    },
    created() {
      this.getList()
    },
    mounted() {

    },
    methods: {
      //恢复编辑
      recovery_edit(val){
        contract_check(val.row.id,0).then(res=>{
          console.log(res)
          if(res.code==200){
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.getList()
          }
        })
      },
      //下拉刷新
      selet(){
        this.getList()
      },
      // 获取列表数据
      getList(page, limit, listQuery) {
        page = page || this.listQuery.page
        limit = limit || this.listQuery.limit
        //定义listquery，为了下方可以使用key_word.....
        listQuery = listQuery || this.listQuery
        let keyWord = listQuery.keyword || ''
        this.listQuery.searchTime = listQuery.searchTime && listQuery.searchTime.length > 0 ? listQuery.searchTime[0] +
          ',' + listQuery.searchTime[1] : ''
        this.listLoading = true
        uncheck_list(this.listQuery).then(res => {
          console.log(res, "公告")
          this.list = res.data
          this.page_count = res.count
          this.listLoading = false
        })
      },
      //搜索事件
      searchList() {
        console.log(this.listQuery.searchTime)
        this.getList(1, this.listQuery.limit, this.listQuery)
        this.listQuery.searchTime = this.listQuery.searchTime.split(",")
      },
      //每页几条数据
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.listQuery.limit = val
        this.getList();
      },
      //跳转到
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.listQuery.page = val
        this.getList();
      },
      list_del(val) {
        console.log(val.row)
        contract_check(val.row.id,2).then(res=>{
          console.log(res)
          if(res.code==200){
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.getList()
          }
        })
      },
      list_detail(val) {
        let that = this
        that.popup_details_show = true
        contract_detail(val.row.id).then(res => {
          console.log(res)
          if (res.code == 200) {
            that.ruleForm = res.data
          }
        })
      },
      Refresh() {
        this.listQuery.keyword = ""
        this.listQuery.searchTime = ""
        this.listQuery.limit = 10
        this.listQuery.page = 1
        this.getList()
      },
      edit(val){
        console.log(val.row)
        contract_check(val.row.id,1).then(res=>{
          console.log(res)
          if(res.code==200){
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.getList()
          }
        })
      }
    }
  }
</script>
<style type="text/css" scoped="scoped">
  .button_wight {
    width: 60%;
    height: 60px;
  }

  .button {
    text-align: center;
  }

  .desc {
    display: flex;
  }

  .flex {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .main {
    padding: 20px;
  }

  .sortable-ghost {
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;
  }

  .fenye {
    padding: 20px 0px;
  }

  .el-range-editor.el-input__inner {
    width: 230px !important;
    padding: 3px 3px !important;
  }
</style>
